<template>
  <div class="complete-box box-shadow">
    <div style="border-radius: 8px 8px 0 0;background-color: rgba(246, 247, 248, 1);height: 24px;padding: 13px 28px;">
      <div style="height: 25px;float: left;">
        <span style="float: left;">
          <img src="../../assets/images/download.svg" />
        </span>
        <a 
          :href="downloadUrl"
          target="_blank"
          style="color: rgba(250, 140, 22, 1);font-size: 14px;display: inline;line-height: 25px;margin-left: 15px;text-decoration: underline;"
          >
          下载结算单
        </a>
      </div>
      <div style="height: 25px;margin-left: 50px;float: left;">
        <span style="float: left;font-size: 26px;" class="el-icon-printer">
        </span>
        <span 
          @click="printOrder()"
          class="download-order">
          打印结算单
        </span>
      </div>
    </div>
    <div 
      id="order" 
      class="order"
      v-loading="loading">
      <table 
        border="1px"
        cellspacing="0" 
        style="width: 100%;font-family: '宋体';font-size: 12px;"
        >
        <thead>
          <tr>
            <td colspan="11" >
              <div
                style="font-size: 26px;font-weight: 900;text-align: center;line-height: 30px;"
              >
                <b>浙江乾唐汇环卫科技有限公司</b>
              </div>
              <div 
                style="font-size: 21px;font-weight: 900;text-align: center;line-height: 30px;letter-spacing: 1em;text-indent: 1em;"
                >
                结算单
              </div>
              <div
                style="font-size: 16px;text-align: right;font-weight: 550;padding-right: 5px;"
              >
                <span>单号</span>
                <span>{{data.order}}</span>
              </div>
            </td>
          </tr>
          
          <tr 
            :height="high">
            <td 
              rowspan="2" 
              colspan="2"
              width="9.7%"
              style="font-size: 16px;font-weight: 900;padding-left: 1em;"
              >
              车&nbsp;牌号&nbsp;码
            </td>
            <td 
              rowspan="2" 
              width="20%"
              style="font-size: 24px;font-weight: 900;">{{data.licenseplatenumber}}</td>
            <td 
              colspan="2" 
              width="13%"
              style="font-size: 16px;font-weight: 900;text-align: center;">客户名称</td>
            <td 
              colspan="6" 
              style="text-indent: 2px;"
              >{{data.companyname}}</td>
          </tr>
          <tr :height="high">
            <td
              colspan="2" 
              width="11.5%"
              style="font-size: 16px;font-weight: 600;text-align: center;"
              >客户地址</td>
            <td 
              colspan="6"
              width="48.6%"
              style="text-indent: 2px;">{{data.address}}</td>
          </tr>
          <tr :height="high">
            <td 
              colspan="2"
              style="font-size: 16px;font-weight: 900;text-align: center;"
              >品牌型号</td>
            <td style="text-indent: 2px;">{{data.model}}</td>
            <td 
              colspan="2"
              style="text-align: center;font-size: 16px;letter-spacing: 5px;font-weight: 900;"
              >车架号</td>
            <td 
              colspan="2"
              style="text-indent: 2px;">{{data.vin}}</td>
            <td 
              colspan="2"
              style="font-weight: 900;font-size: 16px;text-align: center;"
              >发动机号</td>
            <td 
              colspan="2"
              style="text-indent: 2px;"
              >{{data.engineNo}}</td>
          </tr>
          <tr :height="high">
            <td
              colspan="2"
              style="font-size: 16px;font-weight: 900;text-align: center;">进厂里程</td>
            <td
              style="text-indent: 2px;">{{data.mileage}}KM</td>
            <td 
              colspan="2"
              style="text-align: center;font-size: 16px;font-weight: 900;"
              >进厂时间</td>
            <td
              width="18%"
              colspan="2"
              style="text-indent: 2px;">{{data.createTime}}</td>
            <td
              colspan="2"
              style="font-weight: 900;font-size: 16px;text-align: center;"
              >出厂时间</td>
            <td 
              width="25%"
              colspan="2"
              style="text-indent: 2px;"
              >{{data.outTime}}</td>
          </tr>
          <tr :height="high">
            <td
              colspan="2"
              style="font-size: 16px;font-weight: 900;text-align: center;letter-spacing: 5px;">联系人</td>
            <td
              style="text-indent: 2px;">{{data.name}}</td>
            <td 
              colspan="2"
              style="text-align: center;font-size: 16px;font-weight: 900;"
              >联系电话</td>
            <td
              colspan="2"
              style="text-indent: 2px;">{{data.phone}}</td>
            <td
              colspan="2"
              style="font-weight: 900;font-size: 16px;text-align: center;letter-spacing: 1em;"
              >单位</td>
            <td 
              colspan="2"
              style="text-indent: 2px;"
              >元</td>
          </tr>
          <tr :height="high">
            <td
              colspan="2"
              style="font-size: 16px;font-weight: 900;text-align: center;">维修类别</td>
            <td 
              colspan="9"
              style="text-indent: 2px;">上装维修</td>
          </tr>
          <tr :height="high">
            <td 
              rowspan="2" 
              width="5%"
              style="font-weight: 900;text-align: center;">序号</td>
            <td 
              colspan="2"
              width="23.8%"
              style="font-weight: 900;text-align: center;letter-spacing: 5px;">维修项目</td>
            <td 
              rowspan="2"
              style="font-weight: 900;text-align: center;">工时</td>
            <td 
              width="7.6%"
              rowspan="2"
              style="font-weight: 900;text-align: center;">工时费</td>
            <td 
              colspan="6"
              style="font-weight: 900;text-align: center;letter-spacing: 5px;">更换配件</td>
          </tr>
          <tr :height="high">
            <td
              colspan="2"
              style="font-weight: 900;text-align: center;">维修单价（）</td>
            <td width="5%" style="font-weight: 900;text-align: center;">序号</td>
            <td style="font-weight: 900;text-align: center;letter-spacing: 5px;">配件名称</td>
            <td width="5%" style="font-weight: 900;text-align: center;">单位</td>
            <td width="5%" style="font-weight: 900;text-align: center;">数量</td>
            <td width="7.5%" style="font-weight: 900;text-align: center;">单价</td>
            <td width="9.3%" style="font-weight: 900;text-align: center;">金额</td>
          </tr>
        </thead>
        <tbody>
         <tr :height="high" v-for="(item,index) in work" :key="index">
            <td style="text-align: center;">{{index + 1}}</td>
            <td colspan="2" style="text-indent: 2px;">{{item.entryName}}</td>
            <td style="text-align: center;"></td>
            <td style="text-align: right;padding-right: 2px;"><span v-if="typeof item.hourFee != 'undefined'">￥</span>{{item.hourFee}}</td>
            <td style="text-align: center;">{{index + 1}}</td>
            <td style="text-indent: 2px;">{{parts[index].name}}</td>
            <td style="text-align: center;"><span v-if="typeof parts[index].count != 'undefined'">个</span></td>
            <td style="text-align: center;">{{parts[index].count}}</td>
            <td style="text-align: right;padding-right: 2px;"><span v-if="typeof parts[index].outPrice != 'undefined'">￥</span>{{parts[index].outPrice}}</td>
            <td style="text-align: right;padding-right: 2px;"><span v-if="typeof parts[index].outPrice != 'undefined'">￥{{parts[index].outPrice * parts[index].count}}</span></td>
          </tr>
        </tbody>
        <tfoot>
          <tr :height="high">
            <td 
              colspan="3"
              style="font-weight: 900;text-align: right;padding-right: 2px;">工时费小计</td>
            <td style="text-align: center;"></td>
            <td style="text-align: right;padding-right: 2px;">￥{{data.subtotalOfHourlyCharges}}</td>
            <td colspan="4" style="font-weight: 900;text-align: right;padding-right: 2px;">配件费小计</td>
            <td colspan="2" style="text-align: right;padding-right: 2px;">￥{{data.sparePartsSubtotal}}</td>
          </tr>
          <tr :height="high">
            <td
              colspan="3"
              style="font-weight: 900;text-align: right;padding-right: 2px;">工时折扣</td>
            <td style="text-align: center;">{{data.discountRate}}</td>
            <td style="text-align: right;padding-right: 2px;">￥{{data.discountedPriceForWorkingHours}}</td>
            <td colspan="4" style="font-weight: 900;text-align: right;padding-right: 2px;">配件折扣</td>
            <td style="text-align: center;">{{data.accessoryRate}}</td>
            <td style="text-align: right;padding-right: 2px;">￥{{data.discountedPricesForAccessories}}</td>
          </tr>
          <tr :height="high">
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td colspan="4" style="font-weight: 900;text-align: right;padding-right: 2px;">配件管理费</td>
            <td style="text-align: center;">{{data.accessoryManagement}}</td>
            <td style="text-align: right;padding-right: 2px;">￥{{data.accessoryManagementFeeFiscountPrice}}</td>
          </tr>
          <tr :height="high">
            <td colspan="3" style="font-weight: 900;text-align: right;padding-right: 2px;">工时合计</td>
            <td colspan="2" style="text-align: right;padding-right: 2px;">{{data.discountedPriceForWorkingHours}}</td>
            <td colspan="4" style="font-weight: 900;text-align: right;padding-right: 2px;">配件合计</td>
            <td colspan="2" style="text-align: right;padding-right: 2px;">￥{{data.accessoriesInTotal}}</td>
          </tr>
          <tr :height="high">
            <td colspan="6" style="font-weight: 900;text-align: right;padding-right: 2px;">合计金额</td>
            <td colspan="5" style="text-align: right;padding-right: 2px;">￥{{data.totalAmount}}</td>
          </tr>
          <tr :height="high">
            <td colspan="5" style="font-weight: 900;text-align: right;padding-right: 2px;">税率</td>
            <td style="text-align: center;">{{data.rate}}</td>
            <td colspan="5" style="text-align: right;padding-right: 2px;">￥{{data.ratePrice}}</td>
          </tr>
          <tr :height="high">
            <td colspan="2" style="font-weight: 900;">总计金额</td>
            <td colspan="4" style="text-align: right;padding-right: 2px;">￥{{data.allAmount}}</td>
            <td colspan="5" style="text-align: center;">{{data.bigTitle}}</td>
          </tr>
          <tr height="70">
            <td colspan="11" style="font-size: 10.5px;overflow: hidden;">
              <div style="width: 50%;float: left;">
                <div style="margin-top: 7px;">
                  <span>白联：记账联</span>
                  <span style="margin-left: 3em;">红联：结算</span>
                  <span style="margin-left: 3em;">蓝联：客户联</span>
                </div>
                <div style="margin-top: 7px;">
                  <p>备注：经本人验收确认，同意支付上述费用：</p>
                  <p style="text-indent: 3em;margin-top: 7px;">自带配件出现维修质量问题，概不负责！</p>
                </div>
                
              </div>
              <div style="width: 28%;float: right;height: 68px;font-size: 15px;font-weight: 900;text-align: center;">
                <div style="width: 80px; height: 70px;float: left;">
                  <img 
                    :src="data.commentImg"
                     style="width: 100%;height: 100%;position: relative;top: 0px;"/>

                </div>
                <span style="position: relative;top: 12px;">客&nbsp;户<br/><br/>签&nbsp;字</span>
                
              </div>
            </td>
          </tr>
          <tr :height="high" style="font-size: 14px;">
            <td 
              colspan="3" 
              style="border-right: none;font-weight: 900;">联系电话：0571-83539759</td>
            <td colspan="8" style="border-left: none;font-weight: 900;">地址：杭州市萧山区萧山经济技术开发区桥南区块春江路7号</td>
          </tr>
        </tfoot>
      </table>
    </div>

  </div>
</template>

<script>
  import $ from 'jquery'
  import {getOrderInfo} from '@/api/workspace/work_order'
  export default {
    data() {
      return {
        data:{},
        high:25,
        downloadUrl:'',
        info:[],
        number:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17],
        parts:[],
        work:[],
        loading:true
      }
    },
    created() {
      this.load();
    },
    mounted() {
      console.log(this.downloadUrl)
    },
    methods:{
      printOrder:function(){
          var obj = $('#order');
          //创建一个新的窗口
          var newWindow=window.open("打印窗口","_blank");
          var docStr = obj.html();
          //把需要打印的内容写进新的窗口
          newWindow.document.write(docStr);
          newWindow.document.close();
          //打印
          newWindow.print();
          newWindow.close();
      },
      load:function(){
        var that = this;
        var id = that.$route.query.id;
        //处理开发环境跨域问题
        that.downloadUrl = process.env.VUE_APP_API + '/huanwei/admin/settlment/print/settlement?settId=' + id;
        
        getOrderInfo({settlmentId:id}).then(response => {
          var _data = response.data;
          console.log(_data)
          if(_data.status == 200){
            that.loading = false;
            that.data = _data.data;
            that.parts = _data.data.warehouses;
            that.work = _data.data.allItems;
            while(that.parts.length < 17){
              that.parts.push({});
            }
            while(that.work.length < 17){
              that.work.push({});
            }
          }else {
            that.$message({
              message:'发生错误',
              showClose:true,
              type:'error',
              offset:'100'
            })
          }
        }).catch(error => {
          alert('网络错误');
          that.$router.push({
            path:'/main/work_order'
          })
          console.log(error)
        })
      }
    }
  }
</script>

<style lang="css" scoped>
  .complete-box {
    margin: 10px;
    border-radius: 8px 8px 0 0;
    background-color: white;
  }
  .download-order {
    color: rgba(250, 140, 22, 1);
    font-size: 14px;
    line-height: 25px;
    font-weight: Medium;
    text-decoration: underline;
    margin-left: 15px;
    cursor: pointer;
    float: left;
  }
  .order {
    margin: 10px 12px;
    padding: 20px 36px;
    width: 700px;
  }
</style>
